<template>
	<div id="trafficker">
		<v-header>
			<price-header></price-header>
		</v-header>
		<v-content class="width-1200">
			<div class="title"><span>贸易商详情</span></div>
			<div class="infos">
				<div class="name my-flex-left">
					<div class="logo">
						<img v-if="modelData.iconUrl" :src="modelData.iconUrl" alt="" />
						<img v-else src="../../assets/centers/touxiang.jpg" alt="" />
					</div>
					<div class="shortname">
						<span>{{modelData.shortName}}</span>
						<div>
							<li>已认证</li>
							<li>{{modelData.levelCN}}</li>
						</div>
					</div>

				</div>
				<ul class="concat">
					<li>
						<span>公司 :</span><span>{{modelData.userName}}</span>
					</li>
					<li>
						<span>地址 :</span><span>{{modelData.addressPre}}{{modelData.addressDetail}}</span>
					</li>
					<li>
						<span>联系电话 :</span>
						<span v-if="$store.state.userInfo && $store.state.userInfo.level &&  $store.state.userInfo.level!='ordinary_user'">{{modelData.tel}}</span>
							<span v-else>VIP可见</span>
						
						</span>
					</li>
				</ul>
			</div>

			<div class="type">
				<span>供货种类</span>
			</div>
			<div class="types my-flex">
				<li @click="changeType(1)" class="hover" :class="[{active:type==1}]">原油</li>
				<li @click="changeType(2)" class="hover" :class="[{active:type==2}]">成品油</li>
				<li @click="changeType(3)" class="hover" :class="[{active:type==3}]">化工品</li>
				<li @click="changeType(4)" class="hover" :class="[{active:type==4}]">LNG</li>
				<li @click="changeType(5)" class="hover" :class="[{active:type==5}]">物资设备</li>
			</div>
			<div class="list">

				<div class="my-flex" v-for="item in tableData">
					<li>{{item.name}}</li>
					<li class="color-red">{{item.priceCN}}</li>
					<li>{{item.userName}}</li>
					<li class="buy my-flex-left">
						<div class="hover my-btn" @click="goProduct(item)">购买</div>
					</li>
				</div>
			</div>
			<v-empty v-if="tableData.length==0"></v-empty>
		</v-content>
	</div>
</template>

<script>
	import service from '@/js/services/trafficker';
	export default {
		name: 'product',
		data() {
			return {
				id: null, //贸易商id
				modelData: {},
				tableData: [],
				type: 1
			}
		},
		mounted() {
			console.log(this.$route.query)
			if(this.$route.query && this.$route.query.id) {
				this.id = this.$route.query.id;
				this.getTradeDetail();
				this.getProductList();
			}

		},
		methods: {
			...service,
			changeType(type) {
				if(this.type == type) {
					return;
				}
				this.type = type;
				this.getProductList();
			},
			goProduct(item) {
				this.$router.push('/product?id=' + item.id);
			}
		}
	}
</script>

<style lang="less" src="../../less/page/trafficker/index.less"></style>